<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" type="text/css" href="../style/index.css" />
    <link rel="stylesheet" type="text/css" href="../style/reset.css" />
</head>

<body>


    <div class="googs_list tc">
        <div class="tc">
            <br>
            <h2>商品列表展示</h2>
            <br>
        </div>
        <ul class="list_ul">
            <!-- <li>
                <img src="../imgs/01.png">
                <div class="good_title mt5">
                    小米巨能写中性笔
                </div>
                <div class="price mt5">
                    249元
                </div>
                <button type="button" class="btn_add mt5">
                    加入购物车
                </button>
            </li>
            <li>
                <img src="../imgs/02.png">
                <div class="good_title mt5">
                    小米超续航蓝牙耳机
                </div>
                <div class="price mt5">
                    249元
                </div>
                <button type="button" class="btn_add mt5">
                    加入购物车
                </button>
            </li>
            <li>
                <img src="../imgs/03.png">
                <div class="good_title mt5">
                    小米智能手环
                </div>
                <div class="price mt5">
                    249元
                </div>
                <button type="button" class="btn_add mt5">
                    加入购物车
                </button>
            </li>
            <li>
                <img src="../imgs/04.png">
                <div class="good_title mt5">
                    米家电磁炉
                </div>
                <div class="price mt5">
                    249元
                </div>
                <button type="button" class="btn_add mt5">
                    加入购物车
                </button>
            </li>
            <li>
                <img src="../imgs/05.png">
                <div class="good_title mt5">
                    米家电磁炉
                </div>
                <div class="price mt5">
                    249元
                </div>
                <button type="button" class="btn_add mt5">
                    加入购物车
                </button>
            </li>-->
        </ul>
    </div>
    <table>
        <thead>
            <tr>
                <th>全选</th>
                <th>商品</th>
                <th>数量</th>
                <th>单价</th>
                <th>小计</th>
                <th>操作</th>
                <th>时间</th>
            </tr>
        </thead>
        <tbody>
            <!-- <tr>
                <td>
                    <input type="checkbox" name="" id="" value="" />
                </td>
                <td>
                    <p>
                        <img src="../imgs/01.png">
                        <br>
                        <span>米家压力IH电</span>
                    </p>
                </td>
                <td>
                    <button type="button" class="btn">-</button>
                    <input type="text" name="" id="" value="" class="count" />
                    <button type="button" class="btn">+</button>
                </td>
                <td>
                    <span>3000元</span>
                </td>
                <td>
                    3000*2
                </td>
                <td>
                    <button type="button">删除</button>
                </td>
                <td>
                    2020/01/10
                </td>

            </tr> -->

        </tbody>
        <tfoot>
            <tr>
                <td>
                    <label>
                        <input type="checkbox" name="check" class="quanxuan" />
                        全选按钮
                    </label>
                </td>
                <td>
                    <button type="button" id="delChecked">
                        删除选中商品
                    </button>
                </td>
                <td colspan="4"></td>
                <td>
                    总价：<br>
                    <div id="sum">
                        3元
                    </div>
                </td>
            </tr>
        </tfoot>
    </table>
    <script src="../js/getData.js"></script>
    <script>
        var list_ul = document.getElementsByClassName('list_ul')[0]
        var quanxuan = document.getElementsByClassName('quanxuan')[0]
        var tbody = document.querySelector('tbody')
        var sum = document.querySelector('#sum')
        var delChecked = document.querySelector('#delChecked')
        var arr = []
        // 取值
        var obj = JSON.parse(localStorage.dataObj)
        getLocal()
        show(obj)
        show1(arr)

        function getLocal() {
            var sts = localStorage.getItem('arr1')
            arr = JSON.parse(sts)
            if (arr == null) {
                arr = []
            }
        }

        function setLocal(arr) {
            localStorage.setItem('arr1', JSON.stringify(arr))
        }
        //  渲染页面
        function show(obj) {
            var str = ''
            for (var i = 0; i < obj.length; i++) {
                str += `<li>
                            <img src="${obj[i].image}">
                            <div class="good_title mt5">
                                ${obj[i].name}
                            </div>
                            <div class="price mt5">
                                ${obj[i].price}元
                            </div>
                            <button type="button" class="btn_add mt5 " onclick="addFun(${obj[i].productid})">
                                加入购物车
                            </button>
                        </li>`
            }
            list_ul.innerHTML = str
        }
        //  点击加入购物车

        function addFun(id) {
            for (var i = 0; i < obj.length; i++) {
                if (id == obj[i].productid) {
                    var j = {}
                    j.id = obj[i].productid
                    j.name = obj[i].name
                    j.price = obj[i].price
                    j.img = obj[i].image
                    j.sj = setTime()
                    j.sl = 1
                    arr.push(j)
                    show1(arr)
                    setLocal(arr)
                }
            }
        }
        console.log(arr);
        //  时间函数
        function setTime(sj) {
            var times = new Date()
            var N = times.getFullYear()
            var Y = times.getMonth() + 1
            var R = times.getDate()
            var Z = times.getDay()
            var s = times.getHours()
            var f = times.getMinutes()
            var m = times.getSeconds()
            var sj = N + "年" + Y + "月" + R + "日" + s + "点" + f + "分" + m + "秒"
            return sj
        }
        // 购物车渲染
        function show1(arr) {
            var stt = ''
            var num = 0
            for (var i = 0; i < arr.length; i++) {
                stt += `<tr>
                            <td>
                                <input type="checkbox" name="" id="xz" value="" />
                            </td>
                            <td>
                                <p>
                                    <img src="${arr[i].img}">
                                    <br>
                                    <span>${arr[i].name}</span>
                                </p>
                            </td>
                            <td>
                                <button type="button" class="btn" onclick="jy1(${arr[i].id})">-</button>
                                <input type="text" name="" id="" value="${arr[i].sl}" class="count" />
                                <button type="button" class="btn" onclick="jy(${arr[i].id})">+</button>
                            </td>
                            <td>
                                <span>${arr[i].price}元</span>
                            </td>
                            <td>
                                ${arr[i].price*arr[i].sl}元
                            </td>
                            <td>
                                <button type="button" onclick="del(${arr[i].id})">删除</button>
                            </td>
                            <td>
                                ${arr[i].sj}
                            </td>
                        </tr>`
                num += arr[i].price * arr[i].sl
            }

            tbody.innerHTML = stt
            sum.innerHTML = num + "元"
        }
        // 删除
        function del(id) {
            for (var i = 0; i < arr.length; i++) {
                if (id == arr[i].id) {
                    arr.splice(i, 1)
                }
            }
            show1(arr)
            setLocal(arr)
        }
        //  全选
        quanxuan.onclick = function () {
            var xz = document.querySelectorAll('#xz')
            console.log(xz.checked);
            for (var i = 0; i < xz.length; i++) {
                xz[i].checked = quanxuan.checked
            }
        }
        // 删除选中的
        delChecked.onclick = function () {
            var xz = document.querySelectorAll('#xz')
            for (var i = 0; i < xz.length; i++) {
                if (xz[i].checked == true) {
                    console.log('qqq');
                    arr.splice(i, 1)
                }
            }
            show1(arr)
            setLocal(arr)
        }
        // 点击数量加一
        function jy(id) {
            console.log(id);
            for (var i = 0; i < arr.length; i++) {
                if (id == arr[i].id) {
                    arr[i].sl += 1
                }
            }
            show1(arr)
            setLocal(arr)
        }
        // 点击数量减一
        function jy1(id) {
            for (var i = 0; i < arr.length; i++) {
                if (id == arr[i].id) {
                    if (arr[i].sl == 0) {
                        arr[i].sl = 0
                    } else(
                        arr[i].sl -= 1
                    )
                }
            }
            show1(arr)
            setLocal(arr)
        }
    </script>
</body>

</html>